import { observer } from "mobx-react";
import Dialog from ".";
import { WeaSearchGroup, WeaFormItem, WeaLocaleProvider, WeaSelect, WeaCheckbox, WeaBrowser, WeaError } from 'ecCom';
import { toJS } from 'mobx';
import { Row, Col } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class joinCubeDialog extends React.Component {



    render() {
        const { store } = this.props;
        const { readonly, joinSetting, syncType, pathid,nodeid } = store;

        const dataParams = {pathid,nodeid};

        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@pexi62`}
                dialog={store}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@b6bblg`} title={getLabel('510985','表格关联建模模块设置')} showGroup={true}>

                    {joinSetting.map((setObj, index) => {
                        return <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lc733g@${index}`}
                            style={{ marginLeft: 10 }}
                            label={setObj.label}//{`${label}`}
                            labelCol={{ span: '6' }}
                            wrapperCol={{ span: '18' }}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@aza3lm@${index}`} gutter={10}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4gt85k@${index}`} span={3}>
                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@u6io1f@${index}`}
                                        value={setObj.isUsed}
                                        display="switch"
                                        onChange={(value) => store.changeSetting('isUsed', value, setObj.formId)}
                                        viewAttr={readonly ? 1 : 2}
                                    />
                                </Col>
                                {parseInt(setObj.isUsed) && setObj.options.length === 0 &&
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yutg5k@${index}`} span={6} style={{ marginLeft: 20 }} >
                                        <div class='wea-form-item-label' style={{ color: 'red',width:'140px' }}>{getLabel('510986','该表单未创建模块!')}</div>
                                    </Col>
                                }
                                {parseInt(setObj.isUsed) && setObj.options.length > 0 &&
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@11jq36@${index}`} span={6} style={{ marginLeft: 20 }} >
                                        <div class='wea-form-item-label'>{getLabel('510987','关联模块：')}</div>
                                    </Col>
                                }
                                {parseInt(setObj.isUsed) && setObj.options.length > 0 &&
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tbx5bh@${index}`} span={16} >
                                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@x1gzgq@${index}`}
                                            style={{ marginLeft: 100, width: 240 }}
                                            tipPosition='bottom'
                                            ref={ref => store[setObj.formId] = ref}
                                            error={getLabel('510988','未选择关联模块')}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@mcx1ur@${index}`}
                                                options={setObj.options}
                                                value={`${setObj.formmodeId}`}
                                                onChange={(value) => store.changeSetting('formmodeId', value, setObj.formId)}
                                                viewAttr={3}
                                            //viewAttr={readonly ? 1 : 3}
                                            />
                                        </WeaError>
                                    </Col>}
                            </Row>
                        </WeaFormItem>
                    })}



                </WeaSearchGroup>


                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4lh3ui`} title={getLabel('510989','关联配置的同步设置')} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3fdvhk`}
                        label={getLabel('510990','同步方式')}
                        labelCol={{ span: '6' }}
                        wrapperCol={{ span: '18' }}>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@l7ps2l`} gutter={10}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bynnz0`} span={6}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dg0l83`}
                                    options={[{ key: "0", showname: getLabel('508522', '不同步') },
                                    { key: "1", showname: getLabel('508523', '同步到下级节点') },
                                    { key: "2", showname: getLabel('508524', '同步到指定节点') }]}
                                    value={`${syncType}`}
                                    onChange={(value) => store.syncType = value}
                                    viewAttr={readonly ? 1 : 3}
                                />
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ha02wr`} span={8}>
                                {syncType == 2 &&
                                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@i756rs`}
                                        icon={"icon-coms02-Data-center"}
                                        title={getLabel('510980','选择节点')}
                                        type='edcAppPathNode'
                                        isSingle={false}
                                        dataParams={dataParams}
                                        completeParams={dataParams}
                                        destDataParams={dataParams}
                                        maxBrowerHeight={100}
                                        onChange={(value)=>store.syncNodeId=value}
                                        //replaceDatas={toJS(valueObj)}
                                        viewAttr={readonly ? 1 : 3}
                                    />
                                }
                            </Col>
                        </Row>
                    </WeaFormItem>

                </WeaSearchGroup>

            </Dialog>
        )
    }




}